import React from 'react';
import RcTable from '@components/Table/Table.jsx';
import BaseForm from '@components/BaseForm/BaseForm.jsx';
import { Card, Icon, Button } from 'antd';

import Request from '@utils/request.js';
import Utils from '@utils/utils.js';

export default class OrderList extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      list: null,
      current: 1,
      pageSize: 10,
      total: 100,
      selectedRowKeys: null,
      selectedRow: null,
      bike_sn: ['0']
    };
    this.checkNode = null;
    this.formList = [
      {
        type: 'SELECT',
        label: '城市',
        filter: 'city',
        width: 100,
        initialValue: '0',
        list: [{key: '0',name: '全部'}, {key: '1',name: '北京'}, {key: '2',name: '上海'}, {key: '3',name: '天津'}]
      }, {
        type: 'DatePicker',
        mode: 'range',
        label: '选择日期',
      },{
        type: 'SELECT',
        label: '订单状态',
        filter: 'order_status',
        width: 100,
        initialValue: '0',
        list: [{key: '0',name: '全部'}, {key: '1',name: '进行中'}, {key: '2',name: '行程结束'}]
      }
    ];
  }

  componentDidMount() {
    let data = {
      showLoading: true,
    }
    this.requestList(data);
  }

  async checkBtnClick(checkInfo) {
    console.log(checkInfo, 'checkInfo');
    Object.keys(checkInfo).map(item => { 
      checkInfo[item] = !!checkInfo[item] && Utils.dataType(checkInfo[item])==='[object Object]' ? checkInfo[item].valueOf() : checkInfo[item]
    });
    checkInfo = Object.assign(checkInfo, {showLoading: true});
    this.requestList(checkInfo);
  }

  requestList(data) {
    Request.axiosRes({
      url: '/order-list',
      method: 'post',
      data: data,
    }).then(res => {
      this.setState({
        list: res.content.item_list,
        selectedRowKeys: null,
        selectedRow: null
      })
    }, err => {
      console.log(err)  
    })
  }

  overOrder() {
    this.checkBtnClick({});
  }

  orderDetail() {
    const {id} = this.state.selectedRow;
    this.props.history.push(`/common/orderdetail/${id}`);
  }

  render() {
    const { list, total, current, bike_sn, selectedRowKeys, selectedRow } = this.state;
    const columns = [{
      title: '订单编号',
      dataIndex: 'order_sn',
      key: 'order_sn'
      },{
        title: '车辆编号',
        dataIndex: 'bike_sn',
        key: 'bike_sn',
        filterIcon: filtered => <Icon type="smile-o" style={{ color: filtered ? '#108ee9' : '#aaa' }} />,
        filterMultiple: false,
        filteredValue: bike_sn,
        filters: [{
          text: '全部',
          value: '0',
        },{
          text: '单号',
          value: '1',
        }, {
          text: '双号',
          value: '2'
        }]
      },{
        title: '用户名',
        dataIndex: 'user_name',
        key: 'user_name'
      }, {
        title: '手机号',
        dataIndex: 'mobile',
        key: 'mobile'
      }, {
        title: '里程',
        dataIndex: 'distance',
        key: 'distance'
      }, {
        title: '行程时长',
        dataIndex: 'total_time',
        key: 'total_time'
      }, {
        title: '状态',
        dataIndex: 'status',
        key: 'status',
        render: (txt) => txt===1&&'进行中'||txt===2&&'已结束'
      }, {
        title: '开始时间',
        dataIndex: 'start_time',
        key: 'start_time'
      }, {
        title: '结束时间',
        dataIndex: 'end_time',
        key: 'end_time'
      }, {
        title: '订单金额',
        dataIndex: 'total_fee',
        key: 'total_fee'
      }, {
        title: '实付金额',
        dataIndex: 'user_pay',
        key: 'user_pay'
      }];
    return(
      <div>
        <Card title='订单查询'>
          <BaseForm
            formList={this.formList}
            submitForm={(formInfo) => this.checkBtnClick(formInfo)}
          />
        </Card>
        <Button 
          type="primary"
          style={{margin: '10px'}}
          disabled={!!!selectedRowKeys&&!!!selectedRow}
          onClick={() => this.orderDetail() }
        >查看详情</Button>
        <Button 
          type="primary"
          style={{margin: '10px'}}
          disabled={!!!selectedRowKeys&&!!!selectedRow}
          onClick={() => this.overOrder() }
        >结束行程</Button>
        <RcTable
          columns={columns}
          dataSource={list}
          rowKey={record => record.id}
          pagination={{
            current: current,
            total: total,
            showQuickJumper: true,
            showSizeChanger: false
          }}
          rowSelection={{
            type: 'radio',
            selectedRowKeys,
            selectedRow,
            onChange: (selectedRowKeys, selectedRow) => {
              this.setState({
                selectedRowKeys,
                selectedRow: selectedRow[0]
              })
            }
          }}
          onRow={
            (record, index) => {
              return {
                onClick: () => {
                  this.setState({
                    selectedRowKeys: [index+1],
                    selectedRow: record
                  })
                }
              }
            }
          }
          onChange={
            (pagination, filters) => {
              this.setState({
                ...pagination,
                ...filters
              }, () => {
                this.checkBtnClick({});
              })
            }
          }
        />
      </div>
    );
  }
}